
import React, { useEffect} from 'react'
// import axios from 'axios'
import { Layout, Menu } from 'antd';
import {
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
    // MailOutlined,
} from '@ant-design/icons';

import './index.css'
import { withRouter } from 'dva/router';

import { connect } from 'dva'
// import getMenulist from '../../actionReducer/getMenulist';



const { Sider } = Layout;
const iconList = {
    // 首页
    "/home": <UploadOutlined />,
    // 用户管理
    "/user-manage": <UserOutlined />,
    "/user-manage/list": <UserOutlined />,
    // 权限管理
    "/right-manage": <VideoCameraOutlined />,
    "/right-manage/role/list": <VideoCameraOutlined />,
    "/right-manage/right/list": <VideoCameraOutlined />,
    // 新闻管理
    // "/news-manage": <UploadOutlined/>,
    // 审核管理
    // "/audit-manage": <UploadOutlined/>,
    // 发布管理
    // "/publish-manage": <UploadOutlined/>,
}



function SideMenu(props) {
    const { role: { rights } } = JSON.parse(localStorage.getItem('token'))
    const { 
        menu, collapsed, openKeys, selectKeys,
        getMenulist, changeOpenKeys ,changeSelectKeys
    } = props
    useEffect(() => {
        // axios.get('rights?_embed=children').then(res => {
        //     setMenu(res.data)
        // })
        getMenulist()
        // 监听url
        props.history.listen(item => {
            // 主菜单被打开
            // 防止collapsed：true即已折叠菜单栏,主菜单打开，影响美观
            if (collapsed){
                changeOpenKeys([]) 
            }else{
                changeOpenKeys(['/' + item.pathname.split('/')[1]])
            }
            // 子菜单被选中
            // setSelectKeys([item.pathname])
            changeSelectKeys([item.pathname])
        })
        
    }, [collapsed])

    // 筛选符合Menu组件库的item内容
    const checkPagePermisson = (item) => {

        return item.filter(item => {
            // 除菜单外，其他item无children属性
            // 是否有二级菜单，且长度是否大于0
            if (item.children?.length && item.pagepermisson === 1 && rights.includes(item.key)) {
                // && item.pagepermisson === 1可以不用,数据链表父都有pagepermisson
                // 添加父图标
                item.icon = iconList[item.key]
                var child = item.children.filter(items => {
                    if (items.pagepermisson === 1 && rights.includes(items.key)) {
                        // 添加子图标
                        items.icon = iconList[item.key]
                        delete items.rightId
                        return items
                    }
                    return null
                })
                item.children = child
                if (!item.children.length) {
                    // 如果左边二级菜单为空(但是父亲可能存在孩子: 无pagepermisson属性的孩子)
                    delete item.children
                }
                return item

            } else if (item.pagepermisson === 1 && rights.includes(item.key)) {
                // 首页有孩子item.children，但长度为0
                // 由于页面会渲染两次，每次刷新,这个函数被调用两次
                item.icon = iconList[item.key]
                delete item.children
                return item
            }
            return null
        })
    }

    // const [menu, setMenu] = useState([]);
    // const [collapsed] = useState(false);
    // const [current, setCurrent] = useState('/home');
    // 第一次加载进来props.location.pathname ，后续不会改变
    // const [selectKeys, setSelectKeys] = useState([props.history.location.pathname]) 
    // const [openKeys, setOpenKeys] = useState(!collapsed?
    //     ['/' + props.history.location.pathname.split('/')[1]]:[]) 

    // 点击子菜单时才触发
    const onClick = (e) => {
        changeSelectKeys([e.key])
        // changeOpenKeys([e.key])
        if (props.history.location.pathname===e.key){
            return null
        }
        props.history.push(e.key)
    };

    return (
        <Sider trigger={null} collapsible collapsed={collapsed}>
            <div style={{ display: 'flex', height: '100%', flexDirection: 'column' }}>
                <div className="logo" >全球新闻发布管理</div>
                <div style={{ flex: '1', overflow: 'auto' }}>
                    <Menu
                        onClick={onClick}
                        // 是否展开折叠,设置为受控,以后只有openKeys状态修改时才会展开
                        openKeys={openKeys}
                        // defaultOpenKeys={openKeys}
                        selectedKeys={selectKeys}
                        mode="inline"
                        theme="dark"
                        items={checkPagePermisson(menu)}
                        // 折叠被触发时(即父菜单被点击时)
                        onOpenChange={(item) => {
                            // 将父菜单展开(可能被展开多个,item里全部存放着)
                            // setOpenKeys(item)
                            changeOpenKeys(item)
                        }}
                    />
                </div>
            </div>
        </Sider>
    )
}
const mapStateToProps = (state) => {
    return {
        collapsed: state.News.collapsed,
        menu: state.News.menu,
        openKeys: state.News.openKeys,
        selectKeys: state.News.selectKeys,
        
    }
}
// const mapDispatchToProps = {
//     getMenulist,
// }
const mapDispatchToProps = (dispatch) => ({
    changeOpenKeys: (value) => (dispatch({
        type: 'News/change_openKeys',
        payload: value,
    })),
    changeSelectKeys: (value) => (dispatch({
        type: 'News/change_selectKeys',
        payload: value,
    })),
    getMenulist:(value) => (dispatch({
        type: 'News/getMenulist',
    })),
    // getMenulist,可能有bug
})

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(SideMenu))